<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/tag_lib.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>스프링 테스트 예제</title>
        <script type="text/javascript">
            // 코멘트를 삭제한다.
            function deleteComment() {
                // Delete(Post) 코멘트를 삭제한다.
                // 코멘트 목록을 가져온다.
            }

            function modifyComment() {
                // Update(Post) 코멘트를 수정한다.
                // 코멘트 목록을 가져온다.
            }
        
            // 코멘트를 추가한다.
            function createComment2() {
                // Post 로 코멘트 추가하고
                // 코멘트 목록을 가져온다.
                $.post('./createComment.jude',
                        $('#commentForm').serialize(),
                        function(data) {
                            // TODO : 이부분은 해당 Row 만 가져와서 append 하는 방식으로 바꾸는 것이 좋을 듯.
                	        getCommentList();
                        }
                );
            }

            // 코멘트 목록을 가져온다.
            function getCommentList() {
                // 목록을  지운다.
                $('#commentList').empty();
                
                // Get 으로 코멘트 목록을 가져온다.
                $.getJSON('./getCommentList.jude',
                       { 'photoId' : $('#photoId').val() },
                       function(data) {
                    	   $('#commentList').append('<table><thead><tr><td>SEQ</td><td>COMMENT</td><td>MEMBER</td></tr></thead><tbody></tbody></table>');
                           var commentRow = $('#commentList tbody');
                           $.each(data.model.commentList, function(index, comment) {
                                   commentRow.append('<tr><td>' + comment['seq'] + '</td><td>' + comment['photoComment'] + '</td><td>' + comment['creatorNo'] + '</td></tr>');
                               }
                           );                       
                       }
                );
            }
        
	        // 사진을 가져온다.
	        function getPhoto() {
	            var action = 'http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=' + $('#apiKey').val() + '&photo_id=' + $('#photoId').val() + '&format=json&jsoncallback=?';
	            $('#action').append(action);
                $.getJSON(action, 
                    function(data) {
                        // checkData(data.photo);
                        var photo = data.photo;
                        $('#photo').append(photo['title']['_content'] + '<br />');
                        $('#photo').append('<img src=\"http://farm' + photo['farm'] + '.static.flickr.com/' + photo['server'] + '/' + photo['id'] + '_' + photo['secret'] + '_m.jpg\" /><br />');
                    }
                );                
	        }        

	        // jQuery 
            $(document).ready(function () {
                // photoId에 맞는 사진을 가져온다.
            	getPhoto();
            	// commentList 를 가져온다.
            	getCommentList();
            });
        </script>
	</head>
    <body">
        <input type="hidden" value="${photo.api_key}" id="apiKey" name="apiKey" />
        <input type="hidden" value="${photo.auth_token}" id="authToken" name="authToken" />
        <div id="action"></div>
	    <div id="photo"></div>
	    <div id="commentList"></div>
	    <div id="commentFormDiv">
	        <form id="commentForm" action="./createComment.jude" method="post" onsubmit="return false;">
                <input type="hidden" value="${photo.photoId}" id="photoId" name="photoId" />
                <textarea rows="3" cols="80" id="photoComment" name="photoComment"></textarea>
                <input type="button" onclick="createComment2();" value="작성" />
            </form>
	    </div>
        <hr />
        <input type="button" onclick="getCommentList();" value="목록가져오기" />
        <a href="./list.jude?&auth_token=${photo.auth_token}">Photo list</a>
	</body>
</html>